<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
</head>
<body>
<!-- 用户管理页面模板 -->
<div class="layui-container" style="padding: 20px;">
    <div class="layui-card">
        <div class="layui-card-header">用户管理</div>
        <div class="layui-card-body">
            <!-- 搜索与添加功能 -->
            <div class="layui-row mb-4">
                <div class="layui-col-md6">
                    <div class="layui-input-inline">
                        <input type="text" id="user-search" placeholder="搜索用户名" class="layui-input">
                    </div>
                    <button class="layui-btn" id="user-search-btn">
                        <i class="fa fa-search"></i> 搜索
                    </button>
                </div>
                <div class="layui-col-md6 text-right">
                    <button class="layui-btn layui-btn-primary" id="add-user">
                        <i class="fa fa-plus"></i> 添加用户
                    </button>
                </div>
            </div>

            <!-- 用户表格 -->
            <table class="layui-table" lay-filter="userTable" id="userTable">
            </table>

        </div>
    </div>
</div>

<!-- 编辑表单 -->
<div id="editUserForm" style="display: none;">
    <form class="layui-form" >
        <input type="hidden" name="userId" id="editUserId">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" id="editUsername" required lay-verify="required"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" id="editEmail" required lay-verify="email"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <select name="role" id="editRole" required lay-verify="required">
                    <option value="1">管理员</option>
                    <option value="0">普通用户</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="editUserSubmit">保存修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<!-- 行内工具条 -->
<script type="text/html" id="userBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i> 编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon">&#xe640;</i> 删除</a>
</script>

</body>
</html>